<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房屋列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/libs/datepicker/css/foundation-datepicker.min.css">

    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/css/common.css">
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/css/style.css">
</head>
<body>
<div class="embedLeft">
    <div class="breadcrumb">
        <span>人员管理</span>
        <b>房屋列表</b>
    </div>
    <div class="embedRight">
        <div class="colum_wrap pt24">
            <form method="post" id="loginform" data-imgcode="imgcode" action="${ctxPath}/admin/room/">
            <div class="column_list clearfix">
                <div class="column">
                    <span class="label">选择日期</span>
                    <div class="colum_box"><input id="date1" name="startDate" placeholder="请选择日期" type="text"/></div>
                    <span class="fl until">至</span>
                    <div class="colum_box"><input id="date2" name="endDate"  placeholder="请选择日期" type="text"/></div>
                </div>
                <div class="column">
                    <span class="label">房屋地址</span>
                    <div class="colum_box"><input placeholder="请输入房屋地址"  name="address"  type="text"/></div>
                </div>
                <div class="column">
                    <span class="label">房东姓名</span>
                    <div class="colum_box"><input placeholder="请输入房东姓名" name="name"  type="text"/></div>
                </div>
                <div class="column">
                    <span class="label">房东电话</span>
                    <div class="colum_box"><input placeholder="请输入房东电话" name="mobile"  type="text"/></div>
                </div>
                <div class="column">
                    <span class="label">房屋状态</span>
                    <div class="colum_box">
                        <div class="select_wrap">
                            <i class="i_drop"></i>
                            <span class="select_text"></span>
                            <select  name="status">
                                <option>选择入住状态</option>
                                <option value="1">入住中</option>
                                <option value="2">门锁申请中</option>
                                <option value="3">空闲中</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
                <div class="search_div"><button class="blueBtn" type="submit">搜索</button></div>
            </form>
        </div>
        <div class="table_Box">
            <table width="100%">
                <tr>
                    <th width="36"><span class="check"></span></th>
                    <th>房屋编号</th>
                    <th>房屋地址</th>
                    <th>房东姓名</th>
                    <th>房东电话</th>
                    <th>添加时间</th>
                    <th>状态</th>
                    <th>门锁编号</th>
                    <th>房屋图片</th>
                    <th>操作</th>
                </tr>
                @if(isNotEmpty(grid.rows)){
                @ for(item in grid.rows){
                <tr>
                    <td><span data="${item.id}"  class="i_check"></span></td>
                    <td>${item.roomNo}</td>
                    <td>${item.address}</td>
                    <td>${item.landlordName!}</td>
                    <td>${item.mobile!}</td>
                    <td>${item.createDate!}</td>
                    @if(item.status!3==1){
                    <td><span class="door_state state_3">入住中</span></td>
                    @}
                    @if(item.status!3==2){
                    <td><span class="door_state">门锁申请中</span></td>
                    @}
                    @if(item.status!3==3){
                    <td><span class="door_state state_2">空闲</span></td>
                    @}
                    <td>${item.lockNo!}</td>
                    <td><a  href="${item.images!1}" target="_blank" ><img style="background: url(${item.images!1}) no-repeat center center;background-size:cover;" height="100" width="150"/></a></td>
                    <td class="operate">
                        <span class="blue record" style="cursor:pointer;"   id="${item.id}">租户列表</span>
                    </td>
                </tr>
                @}
                @}
            </table>
        </div>
        <div class="bottom_page  clearfix">
            <div class="fl allcheck">
                <span class="i_check"></span>
                <span class="blueBtn ml12" id="exportBtn">一键导出</span>
            </div>
            <!--分页-->
            <div class="pagination paginationRt fr m-paging">
            </div>
            <!--分页 end-->
        </div>
    </div>
</div>

<script type="text/javascript" src="${ctxPath}/static/police/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/libs/datepicker/js/foundation-datepicker.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/libs/datepicker/js/locales/foundation-datepicker.zh-CN.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/js/base.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/js/paging.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/js/jsextend.js"></script>
<script src="${ctxPath}/static/blade/js/blade-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
    var list=[
        { name:'张三',mobile:'13267365386', sex:'男', addDate:'2018.08.31 13:00'},
        { name:'张三',mobile:'13267365386', sex:'男', addDate:'2018.08.31 13:00'},
        { name:'张三',mobile:'13267365386', sex:'男', addDate:'2018.08.31 13:00'},
        { name:'张三',mobile:'13267365386', sex:'男', addDate:'2018.08.31 13:00'},
        { name:'张三',mobile:'13267365386', sex:'男', addDate:'2018.08.31 13:00'},
        { name:'张三',mobile:'13267365386', sex:'男', addDate:'2018.08.31 13:00'},
        { name:'张三',mobile:'13267365386', sex:'男', addDate:'2018.08.31 13:00'},
        { name:'张三',mobile:'13267365386', sex:'男', addDate:'2018.08.31 13:00'},
        { name:'张三',mobile:'13267365386', sex:'男', addDate:'2018.08.31 13:00'}
    ];
    $(function(){
        var checkin = $('#date1').fdatepicker({
            onRender: function (date) {
                return '';
            },
            format: "yyyy-mm-dd",
        }).on('changeDate', function (ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.update(newDate);
            }
            checkin.hide();
            $('#date2')[0].focus();

        }).data('datepicker');

        var checkout = $('#date2').fdatepicker({
            format: "yyyy-mm-dd",
            onRender: function (date) {
                return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function (ev) {
            checkout.hide();
        }).data('datepicker');

        var box = new popupBox({
            boxName:'box1',
            content:'<h3>确定一键导出所选房屋？</h3>',
            confirmFn:function(e){
                var check = $(".i_checked");
                var ids = "";
                check.each(function(i, c) {
                    if(ids.length!=0){
                        ids = ids +","
                    }
                    ids = ids+$(c).attr("data");
                });
                window.location.href = '${ctxPath}/admin/room/export?ids=' + ids;
            },
            cancelFn:function(e){
                console.log(e)
            }
        })
        $("#exportBtn").click(function(){
            box.show();
        })

        var box2 = new popupBox({
            boxName:'box1',
            content:'',
            width:'670',
            height:'550',
            confirmFn:function(e){
                console.log(e)
            }
        })

        $(".record").click(function(){
            var id = $(this).attr("id");
            var ajax = new Ajax("${ctxPath}/admin/tenant/tenant_list", function(data){
                console.log(data);
                var model='';
                var len=data.rows.length;
                var list = data.rows;
                for(var i=0; i<len; i++){
                    model+='<tr>'+
                        '<td>'+list[i].name+'</td>'+
                        '<td>'+list[i].mobile+'</td>'+
                        '<td>'+list[i].statusName+'</td>'+
                        '<td>'+list[i].sexName+'</td>'+
                        '<td>'+list[i].createDate2+'</td>'+
                        '</tr>';
                }
                var _model='<div class="table_Box">' +
                    '<table width="100%">'+
                    '<tr>'+
                    '<th>用户姓名</th>'+
                    '<th>用户电话</th>'+
                    '<th>状态</th>'+
                    '<th>性别</th>'+
                    '<th>添加时间</th>'+
                    '</tr>'+model+
                    '</table>'+
                    '</div>';
                box2.params.content=_model;
                box2.change();
                return false;
            });
            var param={
                id:id
            }
            ajax.data = param;
            ajax.start();
        })
    })
    var pagingte = new paging({
        el: '.m-paging',   //分页器初始化元素
        maxPage: ${grid.total},                //最大页数
        index: ${grid.page},                 //当前页数
        page: 5,                    //最大展示页数
        url: '${ctxPath}/adminroom/index/',       //跳转地址
        urlParamName: 'page', //页数参数名
        isHref:true
    });
</script>
</body>
</html>